package com.ele.client.activity.terminal.widget;

import com.google.gwt.core.client.JsArrayString;
import com.google.gwt.core.shared.GWT;
import com.google.gwt.dom.client.DivElement;
import com.google.gwt.dom.client.ImageElement;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;

public class GoogleImagesWidget extends Composite implements ImagesWidget {

    interface DefaultUiBinder extends UiBinder<Widget, GoogleImagesWidget> {
    }

    private static DefaultUiBinder uiBinder = GWT.create(DefaultUiBinder.class);

    @UiField
    DivElement imagesContainer;

    public GoogleImagesWidget() {
        initWidget(uiBinder.createAndBindUi(this));
    }

    @Override
    public void load(String keyword) {
        loadImages(keyword);
    }

    private native void loadImages(String keyword) /*-{
        var that = this;
        $wnd._loadImages(keyword, function () {
            var results = $wnd.imageSearch.results;
            var urls = [];
            for (var i = 0; i < results.length; i++) {
                urls.push(results[i].tbUrl);
            }
            that.@com.ele.client.activity.terminal.widget.GoogleImagesWidget::addImages(Lcom/google/gwt/core/client/JsArrayString;)(urls);

            var cursor = $wnd.imageSearch.cursor;
            var curPage = cursor.currentPageIndex;
            var length = cursor.pages.length;
            that.@com.ele.client.activity.terminal.widget.GoogleImagesWidget::addPagination(II)(length, curPage);
        });
    }-*/;

    void addImages(JsArrayString urls) {
        imagesContainer.setInnerText("");
        Element div = DOM.createDiv();
        for (int i = 0; i < urls.length(); i++) {
            String url = urls.get(i);
            ImageElement img = DOM.createImg().cast();
            img.setSrc(url);
            div.appendChild(img);
        }
        imagesContainer.appendChild(div);
    }

    private void addPagination(int count, int index) {
        Element div = DOM.createDiv();
        div.addClassName("pagination");
        Element ul = DOM.createElement("ul");
        div.appendChild(ul);

        Element anchor = DOM.createAnchor();
        anchor.setAttribute("href", "javascript:imageSearch.gotoPage(" + (index - 1) + ");");
        anchor.setInnerText("«");
        Element li = DOM.createElement("li");
        li.appendChild(anchor);
        if (index == 0) {
            li.addClassName("disabled");
        }
        ul.appendChild(li);

        for (int i = 0; i < count; i++) {
            li = DOM.createElement("li");

            anchor = DOM.createAnchor();
            anchor.setAttribute("href", "javascript:imageSearch.gotoPage(" + i + ");");
            anchor.setInnerText(String.valueOf(i + 1));
            li.appendChild(anchor);
            if (i == index) {
                li.addClassName("active");
            }
            ul.appendChild(li);
        }

        anchor = DOM.createAnchor();
        anchor.setAttribute("href", "javascript:imageSearch.gotoPage(" + (index + 1) + ");");
        anchor.setInnerText("»");
        li = DOM.createElement("li");
        li.appendChild(anchor);
        if (index == count - 1) {
            li.addClassName("disabled");
        }
        ul.appendChild(li);

        imagesContainer.appendChild(div);
    }
}
